Google Charts API এবং Angular ব্যবহার করে আপনি একাধিক চার্ট তৈরি করতে পারেন এবং একটি কম্পোনেন্টে তাদের প্রদর্শন করতে পারেন। এখানে আমরা একাধিক চার্ট যেমন Pie Chart, Line Chart, এবং Bar Chart তৈরি করে দেখব।

Step 1: Angular প্রজেক্ট তৈরি এবং লাইব্রেরি ইন্সটল করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন)।

ng new google-charts-multiple
cd google-charts-multiple

এখন angular-google-charts লাইব্রেরিটি ইন্সটল করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 2: GoogleChartsModule ইমপোর্ট করা

এখন, Angular অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করার জন্য app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: একাধিক Chart তৈরি করা

এখন আমরা একাধিক চার্ট তৈরি করব এবং app.component.ts ফাইলে এগুলোর ডেটা ও অপশন কনফিগার করব। আমরা তিনটি চার্ট তৈরি করব: Pie Chart, Line Chart, এবং Bar Chart।

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Multiple Google Charts Example';

  // Pie Chart Data and Options
  pieChartType = 'PieChart';
  pieChartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];
  pieChartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  // Line Chart Data and Options
  lineChartType = 'LineChart';
  lineChartData = [
    ['Year', 'Sales'],
    ['2010', 1000],
    ['2011', 1170],
    ['2012', 660],
    ['2013', 1030]
  ];
  lineChartOptions = {
    title: 'Sales Over Time',
    curveType: 'function',
    legend: { position: 'bottom' },
    width: 600,
    height: 400
  };

  // Bar Chart Data and Options
  barChartType = 'BarChart';
  barChartData = [
    ['Product', '2019', '2020', '2021'],
    ['Shirts', 1000, 1170, 660],
    ['Pants', 600, 800, 1200],
    ['Shoes', 400, 460, 1120]
  ];
  barChartOptions = {
    chart: {
      title: 'Product Sales Comparison',
      subtitle: 'Sales in 2019, 2020, 2021',
    },
    bars: 'horizontal', // Horizontal Bar Chart
    width: 600,
    height: 400
  };
}

এখানে, আমরা Pie Chart, Line Chart, এবং Bar Chart এর জন্য আলাদা ডেটা এবং কাস্টম অপশন কনফিগার করেছি।

Step 4: HTML ফাইলে Multiple Charts রেন্ডার করা

এখন, app.component.html ফাইলে আমরা তিনটি চার্ট রেন্ডার করব।

app.component.html:

<h1>{{ title }}</h1>

<!-- Pie Chart -->
<h2>Pie Chart</h2>
<google-chart 
  [type]="pieChartType" 
  [data]="pieChartData" 
  [options]="pieChartOptions">
</google-chart>

<!-- Line Chart -->
<h2>Line Chart</h2>
<google-chart 
  [type]="lineChartType" 
  [data]="lineChartData" 
  [options]="lineChartOptions">
</google-chart>

<!-- Bar Chart -->
<h2>Bar Chart</h2>
<google-chart 
  [type]="barChartType" 
  [data]="barChartData" 
  [options]="barChartOptions">
</google-chart>

এখানে, আমরা তিনটি চার্টের জন্য আলাদা google-chart কম্পোনেন্ট ব্যবহার করেছি, এবং প্রতিটি কম্পোনেন্টের জন্য আলাদা type, data, এবং options প্রদান করেছি।

Step 5: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি তিনটি আলাদা চার্ট দেখতে পারবেন: Pie Chart, Line Chart, এবং Bar Chart।

Chart Styling এবং Layout Customization

যেহেতু আমাদের তিনটি চার্ট একসাথে দেখাচ্ছে, আপনি এগুলির লেআউট এবং স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

1. Spacing: চার্টের মধ্যে স্পেসিং বাড়াতে CSS ব্যবহার করতে পারেন।

google-chart {
  margin-bottom: 30px;
}

2. Chart Size: প্রতিটি চার্টের সাইজ আলাদাভাবে কাস্টমাইজ করা যায় height এবং width অপশনের মাধ্যমে।
3. Title and Label Customization: titleTextStyle, hAxis, vAxis কাস্টমাইজ করে টাইটেল এবং লেবেলগুলো স্টাইল করা যায়।

সারাংশ

Multiple Charts তৈরি করতে Google Charts API ব্যবহার করে আপনি সহজেই একাধিক চার্ট একটি Angular কম্পোনেন্টে রেন্ডার করতে পারেন। আপনি Pie Chart, Line Chart, Bar Chart এবং অন্যান্য অনেক চার্ট তৈরি করতে পারবেন এবং তাদের জন্য আলাদা ডেটা এবং অপশন কাস্টমাইজ করতে পারবেন। এইভাবে আপনি একাধিক ডেটা ভিজুয়ালাইজেশন একযোগে আপনার অ্যাপ্লিকেশনে ব্যবহার করতে পারবেন।